<script setup>
  import { putUserProfileApi, uploadImage2OssApi } from '@/api/profile'
  import { useUserStore } from '@/stores'
  import { ref } from 'vue'
  const userStore = useUserStore()

  const loading = ref(false)

  // 默认头像
  const defaultAvatar = 'https://bitejiaoyan.oss-cn-chengdu.aliyuncs.com/bitehouse/web/profile/default-avatar.png'
  // 临时头像
  const avatarUrl = ref(userStore.profile.avatar || defaultAvatar)
  // 临时昵称
  const nickName = ref(userStore.profile.nickName)

  // 选择头像(相册or相机拍摄)
  const onSelectAvatar = async () => {
    if (loading.value) return uni.showToast({ title: '正在上传头像', icon: 'none' })
    loading.value = true
    uni.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      success: async (res) => {
        if (!res.tempFiles.length) return
        // 获取临时路径
        const [{ tempFilePath }] = res.tempFiles
        avatarUrl.value = tempFilePath
      },
      fail: (error) => {
        uni.showToast({
          title: error.errMsg,
          icon: 'none'
        })
      },
      complete: () => {
        loading.value = false
      }
    })
  }

  // 提交修改
  const onSubmit = async () => {
    try {
      loading.value = true
      let avatar = null
      if (avatarUrl.value) {
        // 上传至oss服务器
        const resp = await uploadImage2OssApi({
          key: 'file',
          filePath: avatarUrl.value
        })
        avatar = resp.url
      }
      // 提交到自家服务器
      await putUserProfileApi({
        userId: userStore.profile.userId,
        avatar,
        nickName: nickName.value || null
      })
      userStore.setProfile({
        avatar: avatar || userStore.profile.avatar,
        nickName: nickName.value || userStore.profile.nickName
      })
      uni.showToast({
        title: '编辑成功'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    } finally {
      loading.value = false
    }
  }
</script>

<template>
  <bit-nav-bar title="编辑资料" />
  <scroll-view
    scroll-y
    class="edit"
  >
    <view class="edit-body">
      <view
        class="edit-body-avatar edit-body-cell"
        @click="onSelectAvatar"
      >
        <text class="edit-body-title">编辑头像</text>

        <view class="edit-body-avatar__info">
          <image
            class="avatar"
            :src="avatarUrl"
            mode="scaleToFill"
          />
          <image
            src="https://bitejiaoyan.oss-cn-chengdu.aliyuncs.com/bitehouse/web/profile/jiantou.png"
            mode="scaleToFill"
            class="icon-jiantou"
          />
        </view>
      </view>
      <view class="edit-body-nickname edit-body-cell">
        <text class="edit-body-title">编辑昵称</text>
        <view class="edit-body-nickname__info">
          <input
            class="nickname"
            type="text"
            v-model.trim="nickName"
          />
          <image
            src="https://bitejiaoyan.oss-cn-chengdu.aliyuncs.com/bitehouse/web/profile/jiantou.png"
            mode="scaleToFill"
            class="icon-jiantou"
          />
        </view>
      </view>
    </view>
  </scroll-view>
  <view class="footer">
    <button
      class="btn_submit"
      @click="onSubmit"
    >
      提交
    </button>
  </view>
</template>

<style lang="scss" scoped>
  @import '@/styles/variable.scss';
  @import '@/styles/mixins.scss';
  .edit {
    box-sizing: border-box;
    position: fixed;
    top: 176rpx;
    @include bottom-safeArea(108);
    left: 0;
    right: 0;
    padding: 21rpx 30rpx;
    background-color: var(--main-bg-color);
    &-body {
      box-sizing: border-box;
      padding: 0 33rpx 0 57rpx;
      border-radius: 16rpx;
      background-color: #fff;
      &-title {
        font-size: var(--font-size-md);
        font-weight: 600;
        color: var(--text-color-dark);
      }
      &-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100rpx;
        border-bottom: 1rpx solid var(--border-color);
        &:last-child {
          border-bottom-color: transparent;
        }
        .icon-jiantou {
          position: relative;
          top: 2rpx;
          width: 24rpx;
          height: 24rpx;
          margin-left: 20rpx;
        }
      }
      &-avatar {
        &__info {
          display: flex;
          align-items: center;
          .avatar {
            width: 48rpx;
            height: 48rpx;
            border-radius: 100%;
          }
        }
      }
      &-nickname {
        &__info {
          display: flex;
          align-items: center;
          .nickname {
            width: 168rpx;
            height: 40rpx;
            font-size: var(--font-size-md);
            color: var(--text-color-light);
            text-align: right;
          }
        }
      }
    }
  }

  // 底部提交按钮
  .footer {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    @include bottom-safeArea;
    height: 108rpx;
    padding: 14rpx 30rpx;
    .btn_submit {
      height: 80rpx;
      border-radius: 16rpx;
      background-image: linear-gradient(to right, #22cfff, #0fa1fe);
      font-size: var(--font-size-md);
      color: #fff;
      font-weight: 500;
    }
  }
</style>
